<template>
  <section class="description">
    <p class="title">添加学生</p>
    <p class="content">
      注意：新添加学生的密码为默认123456，添加完之后请提醒学生修改密码
    </p>
  </section>
  <section class="add">
    <el-form ref="addStuRef" :model="addStu" label-width="80px">
      <el-form-item label="学号"
                    prop="studentId"
                    :rules="[
                          {required: true, message: '学号不能为空', trigger: 'change'},
                          {validator: checkNumber, trigger: 'change'},
                          {validator: checkStuId, trigger: 'change'}
                    ]">
        <el-input v-model="addStu.studentId"></el-input>
      </el-form-item>
      <el-form-item label="姓名"
                    prop="studentName"
                    :rules="[{required: true, message: '姓名不能为空', trigger: 'change'}]">
        <el-input v-model="addStu.studentName"></el-input>
      </el-form-item>
      <el-form-item label="性别"
                    prop="sex"
                    :rules="[
                            {required: true, message: '性别不能为空', trigger: 'change'},
                            {pattern: /^(男|女){1}$/, message: '只输入男/女'}
                      ]">
        <el-input v-model="addStu.sex"></el-input>
      </el-form-item>
      <el-form-item label="学院"
                    prop="institute"
                    :rules="[{required: true, message: '学院不能为空', trigger: 'change'}]"
                    v-if="role === '0'">
        <el-input v-model="addStu.institute"></el-input>
      </el-form-item>
      <el-form-item label="学院" v-if="role === '1'">
        <el-input v-model="addStu.institute" disabled></el-input>
      </el-form-item>
      <el-form-item label="专业"
                    prop="major"
                    :rules="[{required: true, message: '专业不能为空', trigger: 'change'}]">
        <el-input v-model="addStu.major"></el-input>
      </el-form-item>
      <el-form-item label="年级"
                    prop="grade"
                    :rules="[
                            {required: true, message: '年级不能为空', trigger: 'change'},
                            {validator: checkNumber, trigger: 'change'}
                        ]">
        <el-input v-model="addStu.grade"></el-input>
      </el-form-item>
      <el-form-item label="班级"
                    prop="clazz"
                    :rules="[
                            {required: true, message: '班级不能为空', trigger: 'change'},
                            {validator: checkNumber, trigger: 'change'}
                        ]">
        <el-input v-model="addStu.clazz"></el-input>
      </el-form-item>
      <el-form-item label="联系电话"
                    prop="tel"
                    :rules="[
                            {required: true, message: '联系电话不能为空', trigger: 'change'},
                            {pattern: /^(13[0-9]|14[1|4|5|6|7|8|9]|15[0|1|2|3|5|6|7|8|9]|17[2|3|5|6|7|8]|18[0-9]|19[1|8|9])\d{8}$/, message: '手机号格式不正确'}
                        ]">
        <el-input v-model="addStu.tel"></el-input>
      </el-form-item>
      <el-form-item label="邮箱地址"
                    prop="email"
                    :rules="[
                            {required: true, message: '邮箱不能为空', trigger: 'change'},
                            {type: 'email', message: '请输入正确的邮箱', trigger: ['blur', 'change']},
                        ]">
        <el-input v-model="addStu.email"></el-input>
      </el-form-item>
      <el-form-item label="身份证号"
                    prop="cardId"
                    :rules="[{required: true, message: '身份证号不能为空', trigger: 'change'}]">
        <el-input v-model="addStu.cardId"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addSubmit()">立即创建</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
import {getCurrentInstance, onMounted, reactive, ref} from "vue";
import AES from "@/utils/AESUtil";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router/dist/vue-router";

export default {
  name: "addStudent",
  setup(){
    const router = useRouter()
    const {proxy} = getCurrentInstance()
    let addStuRef = ref(null)
    // eslint-disable-next-line no-undef
    let role = ref(AES.Decrypt($cookies.get("role")))
    let studentId = ref([])
    let addStu = reactive({
      studentId: null,
      studentName: null,
      grade: null,
      major: null,
      clazz: null,
      institute: null,
      tel: null,
      email: null,
      cardId: null,
      sex: null,
    })
    let checkNumber = (rule,value,callback) => {
      const boolean = new RegExp('^[1-9][0-9]*$').test(value)
      if (!boolean) {
        callback(new Error('请输入正整数'))
      }else {
        callback()
      }
    }
    let checkStuId = (rule,value,callback) => {
      if (studentId.value.includes(Number(value))){
        callback(new Error('学号重复，请重新输入'))
      }else {
        callback()
      }
    }
    onMounted(()=>{
      getInfo()
    })
    function getInfo(){
      proxy.$axios.get(
          // eslint-disable-next-line no-undef
          `/manage/students/id`
      ).then(
          response => {
            studentId.value = response.data
          },
          error => {
            console.log('请求失败', error.message)
          }
      )
      if (role.value === '1') {
        proxy.$axios.get(
            // eslint-disable-next-line no-undef
            `/teacher/${$cookies.get("id")}`
        ).then(
            response => {
              addStu.institute = response.data.institute
            },
            error => {
              console.log('请求失败', error.message)
            }
        )
      }
    }
    function addSubmit(){
      proxy.$axios.post(
          // eslint-disable-next-line no-undef
          `/manage/student/add`,
          {...addStu}
      ).then(
          response => {
            if (response.data){
              ElMessage({
                type: 'success',
                message: '添加成功',
              })
              router.push({path: '/manage'})
            }
          },
          error => {
            console.log('请求失败', error.message)
          }
      )
    }
    return{
      addStu,
      role,
      addStuRef,
      checkNumber,
      checkStuId,
      addSubmit
    }
  }
}
</script>

<style scoped>
.add {
  padding: 0px 40px;
  width: 400px;
}
.description {
  margin-left: 40px;
}
.description .title {
  font-size: 22px;
  font-weight: 400;
  color: rgb(31, 47, 61);
}
.description .content {
  width: 600px;
  background-color: rgb(234, 28, 28);
  padding: 16px 32px;
  border-radius: 4px;
  border-left: 5px solid rgb(80, 191, 255);
  margin: 20px 0px;
}
</style>